{% extends 'admin/master.html' %}
{% block body %}
<link rel="stylesheet" href="/static/css/font.css">
<link rel="stylesheet" href="/static/css/xadmin.css">
<script type="text/javascript" src="/static/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<style>
    .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
    .layui-upload{margin-left: 70px;}
    .layui-upload_detail{margin-left: 70px;}
</style>
<script>
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
};
</script>
 <div class="layui-fluid">
			<div class="layui-row">
				<form class="layui-form" action="" lay-filter="example">
					<input type="hidden" id="temp1" name="main_image" value="" />
					<input type="hidden" id="temp2" name="detail_image" value="" />

					<!-- 属性编辑 -->
					<div class="layui-form-item">
						<div class="layui-col-md4">
							<label class="layui-form-label">基本属性</label>
							<div class="layui-input-block">
								<input type="text" id="baseid" name="baseselect" required  lay-verify="required" placeholder="颜色" autocomplete="off" class="layui-input" value="颜色">
								<!-- <select name="baseselect" id="baseselect" lay-filter="baseselect" xm-select="baseselect"
								 xm-select-type="1">
									<option value="0"></option>
									<option value="1">数量</option>
									<option value="2">颜色</option>
									<option value="3">形状</option>
									<option value="4">大小</option>
								</select> -->
							</div>
						</div>
					</div>
					<table class="layui-hide" id="shuxing" lay-filter="test"></table>
					<div class="layui-form-item">
						<div class="layui-col-md4">
							<label class="layui-form-label">附加属性</label>
							<div class="layui-input-block">
								<input type="text" id="fuid" name="fujiaselect" required  lay-verify="required" placeholder="尺码" autocomplete="off" class="layui-input"  value="尺码">

								<!-- <select name="fujiaselect" id="fujiaselect" lay-filter="fujiaselect" xm-select="fujiaselect"
								 xm-select-type="1">
									<option value="0"></option>
									<option value="1">数量</option>
									<option value="2">颜色</option>
									<option value="3">形状</option>
									<option value="4">是否含盆</option>
								</select> -->
							</div>
						</div>
					</div>
					<table class="layui-hide" id="fujiashuxing" lay-filter="test"></table>
					<div class="layui-form-item">
						<div class="layui-col-md4">
							<label class="layui-form-label">商品销售规格<span style="color:red">●</span></label>

						</div>
					</div>

					<table class="layui-hide" id="datatable" lay-filter="demoEvent"></table>

					<!-- <table class="layui-table" lay-data="{height: 308, url:'https://www.layui.com/demo/table/user/'}" lay-filter="demoEvent">
					  <thead>
					    <tr>
					      <th lay-data="{field:'id', width:80}">ID</th>
					      <th lay-data="{field:'username', width:80}">用户名</th>
					      <th lay-data="{field:'sign', width:'50%', event: 'setSign', style:'cursor: pointer;'}">签名</th>
					      <th lay-data="{field:'experience'}">积分</th>
					      <th lay-data="{field:'score'}">评分</th>
					    </tr>
					  </thead>
					</table> -->
					<div class="layui-form-item">
						<label for="L_repass" class="layui-form-label"></label>
						<button class="layui-btn" lay-filter="add" lay-submit="" id="test9">修改<i id="upload"></i></button>
						<button style="display: none;" class="layui-btn" lay-filter="add" lay-submit="" id="hiddenBottono">修改2</button>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			// document.getElementById("123").onclick=function(){
			// alert("aa");
			// }
			// window.aa=function(){
			// 	alert("aa");
			// }
			// aa()

		</script>
		<script>
			layui.use(['form', 'layer', 'table'],
				function() {
					var shuxing=[{
							"propertyname": "红色","propertyid": "11","LAY_CHECKED":true
						}, {
							"propertyname": "黄色","propertyid": "12"
						},{
							"propertyname": "蓝色","propertyid": "13"
						},{
							"propertyname": "白色","propertyid": "14"
						},{
							"propertyname": "黑色","propertyid": "15"
						}]
					var fujia=[{
							"propertyname": "S码","propertyid": "41","LAY_CHECKED":true
						}, {
							"propertyname": "M码","propertyid": "42"
						},{
							"propertyname": "L码","propertyid": "43"
						},{
							"propertyname": "XL码","propertyid": "44"
						},{
							"propertyname": "XXl码","propertyid": "42"
						}]
					var data=[]
					//表单初始赋值

					$ = layui.jquery;
					$.ajaxSettings.async = false;
					var form = layui.form,
						layer = layui.layer,
					table = layui.table;
					tablefujia = layui.table;
					datatable = layui.table;

					datatable.on('checkbox(user)', function(obj){
					});
					<!--  table start-->
					table.render({
						elem: '#shuxing',
						title: '用户表',
						even: true //开启隔行背景
							,
						size: 'sm',
						data: shuxing,
						done: function(res) {
								data = res.data;
							}
							// ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
							,
						cols: [
							[ //表头
								{
									type: 'checkbox'
								}, {
									field: 'propertyname',
									title: '名称',
									width: 80,
									edit: 'text'
								}
							]
						]
					});


					<!--  table附加属性>
					tablefujia.render({
						elem: '#fujiashuxing',
						title: '用户表',
						even: true //开启隔行背景
							,
						size: 'sm',
						data: fujia,
						done: function(res) {
								data = res.data;
							}
							// ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
							,
						cols: [
							[ //表头
								{
									type: 'checkbox'
								}, {
									field: 'propertyname',
									title: '名称',
									width: 80,
									edit: 'text'
								}
							]
						]
					});




					<!--  table 销售属性>
					table.render({
						id:"datatable",
						elem: '#datatable',
						title: '用户表',
						even: true, //开启隔行背景
						data:[],
						done: function(res) {
								data = res.data;
								if(window.iniData==undefined || window.iniData.length<=0){
									window.iniData=res.data;
								}

							}
							// ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
							,
						cols: [
							[ //表头

								{
									field: 'baseid',
									title: '基本属性id',
									width: 150,
									// edit: 'text',
									hide:true
								},
								{
									field: 'basename',
									title: '基本属性',
									width: 150,
									templet:function(d){
										// debugger
										var base=layui.table.cache["shuxing"]

										for(let i=0;i<base.length;i++){
											if(d.baseid==base[i].propertyid){
												d.basename=base[i].propertyname
												debugger
												return d.basename
											}
										}

									}
									// edit: 'text'
								},
								{
									field: 'fuid',
									title: '附属id',
									width: 150,
									// edit: 'text',
									hide:true
								},
								{
									field: 'funame',
									title: '附加属性',
									width: 150,
									templet:function(d){

										var fu=layui.table.cache["fujiashuxing"]

										for(let i=0;i<fu.length;i++){
											if(d.fuid==fu[i].propertyid){
												d.funame=fu[i].propertyname
												return d.funame
											}
										}

									}
									// edit: 'text'
								},{
									field: 'price',
									title: '价格',
									width: 80,
									edit: 'text'
								},{
									field: 'store',
									title: '库存',
									width: 80,
									edit: 'text'
								},,{
									field: 'pic',
									title: '图片',
									width: 80,
									event: 'setSign',
									templet:function(d){

										if(d.pic==undefined || d.pic==""){
											return '<input type="file" id="'+d.baseid+'-'+d.fuid+'" accept="image/png,image/jpeg" style="display:none"> <div style="height: 30px;background-color: #5555ff;width: 30px;"></div>'
										}else{
											return '<input type="file" id="'+d.baseid+'-'+d.fuid+'" accept="image/png,image/jpeg" style="display:none"> <div style="height: 170px; width: 170px;"><image src="'+d.pic+'"  style="height: 170px; width: 170px;"></div>'
										}

									}
								}
							]
						]
					});


					//监听third属性色块点击单元格事件
					table.on('tool(demoEvent)', function(obj){

					    var data = obj.data;
						var elemid=data.baseid+'-'+data.fuid
					    if(obj.event === 'setSign'){

							document.getElementById(elemid).click();
							document.getElementById(elemid).onchange=function(e){
								var a=document.getElementById(elemid).files[0]

								// var fileObj = fileM.files[0];
								    //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
								    var formData = new FormData();
								    formData.append('file', a);
								    $.ajax({
								        url: " http://127.0.0.1:5000/common/upload/?dir=product",
								        type: "post",
								        dataType: "json",
								        data: formData,
								        async: false,
								        cache: false,
								        contentType: false,
								        processData: false,
								        success: function (json_data) {

											let ka=json_data;
											data.pic=ka.data;
											var dd=layui.table.cache["datatable"]
											var k=dd;
											for(var i=0;i<dd.length;i++){
												if(dd[i].baseid==data.baseid &&dd[i].fuid==data.fuid ){
													dd[i].pic=data.pic
												}
											}
											table.reload('datatable', {
											data: dd
											});

								            // alert("恭喜你！上传成功");
								        },
								    });

							}
							// alert("cc")
					    }
					});
					table.on('checkbox(test)', function(obj){

						let cc=window.iniData;

						// =layui.table.cache["datatable"]
						dd=[]
						shuxing=layui.table.cache["shuxing"]
						fujiashuxing=layui.table.cache["fujiashuxing"]

						for(var sx=0;sx<shuxing.length;sx++){
							for(var fjsx=0;fjsx<fujiashuxing.length;fjsx++){
								let tip=false
								if(shuxing[sx].LAY_CHECKED&&fujiashuxing[fjsx].LAY_CHECKED){
								for(let c1=0;c1<window.iniData.length;c1++){
									if(shuxing[sx].propertyid==window.iniData[c1].baseid && fujiashuxing[fjsx].propertyid==window.iniData[c1].fuid){
										dd.push(window.iniData[c1])
										tip=true
										break;
									}
								}
								if(tip==false){
									dd.push({"baseid": shuxing[sx].propertyid,"basename": shuxing[sx].propertyname,"fuid": fujiashuxing[fjsx].propertyid,"funame": fujiashuxing[fjsx].propertyname})

								}


								}
							}

						}
						// dd=[{
						// 		"title": "一苗3","id": "1"
						// 	}, {
						// 		"title": "2苗3","id": "2"
						// 	}]

						table.reload('datatable', {
						data: dd
						});


						c=layui.table.cache["datatable"]

					});

					<!-- table end -->

					let product = {}

					let skufirst="";
					let skusecond="";
					let skuthird="";
					$.get(prop().serviceUrl + "/product/skuview?productid=" + getQueryVariable("productid"), function(data, status) {
						let a=shuxing;
						let b=fujia

						product = data
						product = JSON.parse(product);
						productprop=product.data;
						debugger
						for(let i=0;i<productprop.skuthird.length;i++){
							for(let a=0;a<shuxing.length;a++){
								if(shuxing[a].propertyid==productprop.skuthird[i].baseid){
									shuxing[a].propertyname=productprop.skuthird[i].basename;
									shuxing[a].LAY_CHECKED=true
									break;
								}
							}
							for(let a=0;a<fujia.length;a++){
								if(fujia[a].propertyid==productprop.skuthird[i].fuid){
									fujia[a].propertyname=productprop.skuthird[i].funame;
									fujia[a].LAY_CHECKED=true
									break;
								}
							}
						}

						$('#baseid').val(productprop.skufirst.basename);
						$('#fuid').val(productprop.skufirst.funame);
						table.reload('shuxing', {
						data: shuxing
						});
						table.reload('fujiashuxing', {
						data: fujia
						});
						table.reload('datatable', {
						data: productprop.skuthird
						});

						// uploadInst.upload();
					});
					form.val('example', product.data)

					//自定义验证规则
					form.verify({
						title: function(value) {
							if (value.length < 5) {
								return '昵称至少得5个字符啊';
							}
							if (skufirst.basename=="无选择") {
								return 'basename不能为空';
							}
							if (skufirst.funame=="无选择") {
								return 'funame请选择';
							}
						},
					});

					//监听提交
					form.on('submit(add)',
						function(data) {
							shuxing=layui.table.cache["shuxing"] ;
							fujiashuxing=layui.table.cache["fujiashuxing"] ;
							skus=layui.table.cache["datatable"] ;
							for(let a=0;a<skus.length;a++){
								for(let i=0;i<shuxing.length;i++){
									if(skus[a].baseid==shuxing[i].propertyid){
										skus[a].basename=shuxing[i].propertyname
										break
										// return d.funame
									}
								}
								for(let i=0;i<fujiashuxing.length;i++){
									if(skus[a].fuid==fujiashuxing[i].propertyid){
										skus[a].funame=fujiashuxing[i].propertyname
										break
										// return d.funame
									}
								}
							}


							// dd=data;
							//baseid和fuid不能一样
							let skufirst={};
							skufirst.baseid=1
							skufirst.basename=data.field.baseselect

							skufirst.fuid=2
							skufirst.funame=data.field.fujiaselect


							let param={"productid":getQueryVariable("productid"),"shuxing":shuxing,"fujiashuxing":fujiashuxing,"skus":skus,"skufirst":skufirst}
							param=JSON.stringify(param)
							$.get(prop().serviceUrl+"/product/skuedit?param="+param,{},function(data,status){

								product=data
								product= JSON.parse(product);
							});
							layer.alert("增加成功", {
									icon: 6
								},
								function() {
								   window.location = "http://127.0.0.1:5000/admin/admin.product"
							    // 获得frame索引
									var index = parent.layer.getFrameIndex(window.name);
									//关闭当前frame
									parent.layer.close(index);
								});
							return false;
						});

				});
		</script>
{% endblock %}
